<template>
  <div v-loading="saveLoading">
    <div class="card mb10">
      <el-card style="max-width: 600px">
        <!--        <template #header>-->
        <!--          <div class="card-header">-->
        <!--            <h3>样本状态跟踪</h3>-->
        <!--          </div>-->
        <!--        </template>-->
        <div class="tip custom-block box-time">
          <el-timeline style="max-width: 600px">
            <el-timeline-item v-for="(activity, index) in stepList" type="info" :key="index" color='#0bbd87' :hollow='true' :timestamp="activity.operateTime">
              <!-- 属性控制是否空心 :hollow="activity.completed" -->
              <p>{{ activity.stateName }}</p>
              <p>{{ '操作人:' + activity.operator }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </div>
    <div class="card mb10" style="hight: 1000px; overflow: auto;display: inline-block">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="详细信息" name="info">
          <div class='box'>
            <el-descriptions title="" :column="1" :size="size" border>
              <el-descriptions-item label="条码号">{{ selectInfo.reqNo  ? selectInfo.reqNo : '无'}}</el-descriptions-item>
              <el-descriptions-item label="病历号"> {{selectInfo.patNo ? selectInfo.patNo : '无'}}</el-descriptions-item>
              <el-descriptions-item label="姓名"> {{selectInfo.patNa ? selectInfo.patNa : '无'}}</el-descriptions-item>
              <el-descriptions-item label="性别"> {{selectInfo.sexNa ? selectInfo.sexNa : '无'}}</el-descriptions-item>
              <el-descriptions-item label="年龄"> {{selectInfo.ageStr ? selectInfo.ageStr : '无'}}</el-descriptions-item>
              <el-descriptions-item label="床号"> {{selectInfo.bedNo ? selectInfo.bedNo : '无'}}</el-descriptions-item>
              <el-descriptions-item label="申请项目"> {{selectInfo.reqPurpose ? selectInfo.reqPurpose : '无'}}</el-descriptions-item>
              <el-descriptions-item label="申请人"> {{selectInfo.reqDoctorNa ? selectInfo.reqDoctorNa : '无'}}</el-descriptions-item>
              <el-descriptions-item label="申请时间"> {{ selectInfo.reqTime ? selectInfo.reqTime : '无' }}</el-descriptions-item>
              <el-descriptions-item label="签收人"> {{ selectInfo.signerNa ? selectInfo.signerNa : '无' }}</el-descriptions-item>
              <el-descriptions-item label="签收时间"> {{ selectInfo.signTime ? selectInfo.signTime : '无' }}</el-descriptions-item>
              <el-descriptions-item label="采集人"> {{ selectInfo.samplingDoctorNa ? selectInfo.samplingDoctorNa : '无' }}</el-descriptions-item>
              <el-descriptions-item label="采集时间"> {{ selectInfo.samplingTime ? selectInfo.samplingTime : '无' }}</el-descriptions-item>
              <el-descriptions-item label="送出人"> {{ selectInfo.samplingDoctorNa ? selectInfo.samplingDoctorNa : '无' }}</el-descriptions-item>
              <el-descriptions-item label="送出时间"> {{ selectInfo.samplingTime ? selectInfo.samplingTime : '无' }}</el-descriptions-item>
              <el-descriptions-item label="送达人"> {{ selectInfo.samplingDoctorNa ? selectInfo.samplingDoctorNa : '无' }}</el-descriptions-item>
              <el-descriptions-item label="送达时间"> {{ selectInfo.samplingTime ? selectInfo.samplingTime : '无' }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="检验结果" name="hisLablist">

          <div class="tableRight">
            <vxe-table ref="wLResultTable" border align="left" resizable show-overflow v-loading="loadingResult" :data="wLResultList" :height="wLResultTableHeight" :row-config="{ isCurrent: true, isHover: true }" :keyboard-config="{ isArrow: true }" :cell-style="calcCellBgColor">
              <vxe-column type="seq" title="#" width="30" fixed="left"></vxe-column>
              <vxe-column field="itemNo" title="检验项目" min-width="120">
                <template #default="{ row }">
                  {{ `${row.itemNo} ${row.itemNa}` }}
                </template>
              </vxe-column>
              <vxe-column field="testResult" title="结果" width="80"></vxe-column>
              <vxe-column field="resultFlag" title="" width="40">
                <template #default="{ row }">
                  <span class="padding-lr-xs text-df">{{ getResultFlag(row.resultFlag) }}</span>
                  <span class="padding-lr-xs" v-if="row.isAlarm === '1' || row.isAlarm === 1">{{ row.alarmText }}</span>
                </template>
              </vxe-column>
              <vxe-column field="ref" title="参考范围" width="80"></vxe-column>
            </vxe-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script lang="ts" setup>
// 引入组件区 ==========
import { reactive, ref, getCurrentInstance, onMounted, watch, PropType } from 'vue';
import { AppStore } from '@/stores/store';
import { ComponentSize, FormInstance } from 'element-plus';
import { IsEmpty, sortByField } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { isEmpty } from 'xe-utils';
import { getOptionValueByCodeGlobalOption, getOptionValueByCodeRptGroupOption } from '@/utils/SysOptionsHelper';
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let store = AppStore();

const selectInfo = reactive({});
const activeName = ref("info");
const saveLoading = ref(false);
const loadingResult = ref(false);
let wLResultList: any[] = reactive([]); //项目列表数据
let wLResultTableHeight = ref(window.innerHeight - 450);
const size = ref<ComponentSize>('default')
let stepList = reactive([]); //跟踪记录对象

// 父组件传值
let props = defineProps({
  curSelectRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.curSelectRow,
  (nval, oval) => {
    Object.assign(selectInfo, nval);
  },
  {
    deep: true,
    immediate: true
  }
);
function loading(params,rptGroup) {
  Object.assign(selectInfo, params);
  console.log(selectInfo, "selectInfo");
  getWkltResultList(rptGroup);
  getTraceRecList();
}
// 获取检验结果
function getWkltResultList(rptGroup :any) {
  if (isEmpty(selectInfo.reqNo)||isEmpty(rptGroup)) {
    return
  }
  wLResultList.length = 0;
  loadingResult.value = false;
  const url = '/lab/maininfo/findRptResultByLabMainReqNo';
  const data = {
    reqNo: selectInfo.reqNo,
    rptGroup: rptGroup
  };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      wLResultList.length = 0;
      //wLResultList.push(...res.data);
      if (!isEmpty(res.data)) {
        wLResultList.push(...sortByField(res.data, 'displayOrder', 'asc'));
      }
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}
function getResultFlag(val) {
  const a = getOptionValueByCodeRptGroupOption('zjmaccsxs');
  if (a === '1' || a === 1) {
    if (val === 'H') {
      const b = getOptionValueByCodeRptGroupOption('pgjgbz');
      if (!IsEmpty(b)) {
        return b;
      }
      return '↑';
    }
    if (val === 'L') {
      const b = getOptionValueByCodeRptGroupOption('pdjgbz');
      if (!IsEmpty(b)) {
        return b;
      }
      return '↓';
    }
    if (val === 'P') {
      const b = getOptionValueByCodeRptGroupOption('yxjgbz');
      if (!IsEmpty(b)) {
        return b;
      }
      return '+';
    }
    if (val === 'Q') {
      const b = getOptionValueByCodeRptGroupOption('ryxjgbz');
      if (!IsEmpty(b)) {
        return b;
      }
      return '±';
    }
    if (val === 'M') {
      const b = getOptionValueByCodeRptGroupOption('zcjgbz');
      if (!IsEmpty(b)) {
        return b;
      }
      return '';
    }
    if (val === 'E') {
      const b = getOptionValueByCodeRptGroupOption('cwjgbz');
      if (!IsEmpty(b)) {
        return b;
      }
      return '×';
    }
    if (val === 'N') {
      const b = getOptionValueByCodeRptGroupOption('nxjgbz');
      if (!IsEmpty(b)) {
        return b;
      }
      return '√';
    }
  }
  if (val === 'H') {
    return '↑';
  }
  if (val === 'L') {
    return '↓';
  }
  if (val === 'P') {
    return '+';
  }
  if (val === 'Q') {
    return '±';
  }
  if (val === 'N') {
    return '√';
  }
  if (val === 'E') {
    return '×';
  }
  if (val === 'M') {
    return '';
  }
  return '';
}
/**
 * 单元格背景颜色
 *【1】是否启用系统选项颜色配置  encolorsetting
 *【2】偏高结果颜色  hresultcolor
 *【3】偏低结果颜色  lresultcolor
 *【4】阳性结果颜色  presultcolor
 *【5】正常结果颜色  mresultcolor
 *【6】弱阳性结果颜包  qresultcolor
 *【7】错误结果颜色  errresultcolor
 *【8】阴性结果颜色  nresultcolor
 *【9】结果标志颜色显示方式 jgbzysxsfs (0:背景色  1:文字颜色)
 */
function calcCellBgColor({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
  /**偏高【标志】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'H' && column && column.field === 'resultFlag') {
    //查询系统选项偏高显示颜色   背景色还是文字颜色
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const b = getOptionValueByCodeRptGroupOption('jgbzysxsfs');
      const c = getOptionValueByCodeGlobalOption('hresultcolor');
      if (b === '0' || b === 0) {
        if (!IsEmpty(c)) {
          return { background: c, color: '#fff' };
        }
      }
      if (b === '1' || b === 1) {
        if (!IsEmpty(c)) {
          return { color: c };
        }
      }
    }
    return { color: '#ff0000' };
  }
  /**偏高【结果】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'H' && column && column.field === 'testResult') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const c = getOptionValueByCodeGlobalOption('hresultcolor');
      if (!IsEmpty(c)) {
        return { background: c, color: '#fff' };
      }
    }
    return { background: '#ff0000', color: '#fff' };
  }

  /**偏低【标志】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'L' && column && column.field === 'resultFlag') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const b = getOptionValueByCodeRptGroupOption('jgbzysxsfs');
      const c = getOptionValueByCodeGlobalOption('lresultcolor');
      if (b === '0' || b === 0) {
        if (!IsEmpty(c)) {
          return { background: c, color: '#fff' };
        }
      }
      if (b === '1' || b === 1) {
        if (!IsEmpty(c)) {
          return { color: c };
        }
      }
    }
    return { color: '#0035ff' };
  }
  /**偏低【结果】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'L' && column && column.field === 'testResult') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const c = getOptionValueByCodeGlobalOption('lresultcolor');
      if (!IsEmpty(c)) {
        return { background: c, color: '#fff' };
      }
    }
    return { background: '#0035ff', color: '#fff' };
  }

  /**阳性【标志】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'P' && column && column.field === 'resultFlag') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const b = getOptionValueByCodeRptGroupOption('jgbzysxsfs');
      const c = getOptionValueByCodeGlobalOption('presultcolor');
      if (b === '0' || b === 0) {
        if (!IsEmpty(c)) {
          return { background: c, color: '#fff' };
        }
      }
      if (b === '1' || b === 1) {
        if (!IsEmpty(c)) {
          return { color: c };
        }
      }
    }
    return { color: '#0035ff' };
  }
  /**阳性【结果】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'P' && column && column.field === 'testResult') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const c = getOptionValueByCodeGlobalOption('presultcolor');
      if (!IsEmpty(c)) {
        return { background: c, color: '#fff' };
      }
    }
    return { background: '#0035ff', color: '#fff' };
  }

  /**弱阳性【标志】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'Q' && column && column.field === 'resultFlag') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const b = getOptionValueByCodeRptGroupOption('jgbzysxsfs');
      const c = getOptionValueByCodeGlobalOption('qresultcolor');
      if (b === '0' || b === 0) {
        if (!IsEmpty(c)) {
          return { background: c, color: '#fff' };
        }
      }
      if (b === '1' || b === 1) {
        if (!IsEmpty(c)) {
          return { color: c };
        }
      }
    }
    return { color: '#0035ee' };
  }
  /**弱阳性【结果】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'Q' && column && column.field === 'testResult') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const c = getOptionValueByCodeGlobalOption('qresultcolor');
      if (!IsEmpty(c)) {
        return { background: c, color: '#fff' };
      }
    }
    return { background: '#0035ee', color: '#fff' };
  }

  /**错误【标志】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'E' && column && column.field === 'resultFlag') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const b = getOptionValueByCodeRptGroupOption('jgbzysxsfs');
      const c = getOptionValueByCodeGlobalOption('errresultcolor');
      if (b === '0' || b === 0) {
        if (!IsEmpty(c)) {
          return { background: c, color: '#fff' };
        }
      }
      if (b === '1' || b === 1) {
        if (!IsEmpty(c)) {
          return { color: c };
        }
      }
    }
    return { color: '#800000' };
  }
  /**错误【结果】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'E' && column && column.field === 'testResult') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const c = getOptionValueByCodeGlobalOption('errresultcolor');
      if (!IsEmpty(c)) {
        return { background: c, color: '#fff' };
      }
    }
    return { background: '#800000', color: '#fff' };
  }

  /**正常【标志】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'M' && column && column.field === 'resultFlag') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const b = getOptionValueByCodeRptGroupOption('jgbzysxsfs');
      const c = getOptionValueByCodeGlobalOption('mresultcolor');
      if (b === '0' || b === 0) {
        if (!IsEmpty(c)) {
          return { background: c, color: '#fff' };
        }
      }
      if (b === '1' || b === 1) {
        if (!IsEmpty(c)) {
          return { color: c };
        }
      }
    }
    return { color: '#000' };
  }
  /**正常【结果】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'M' && column && column.field === 'testResult') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const c = getOptionValueByCodeGlobalOption('mresultcolor');
      if (!IsEmpty(c)) {
        return { background: c, color: '#fff' };
      }
    }
    return { color: '#000' };
  }

  /**阴性【标志】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'N' && column && column.field === 'resultFlag') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const b = getOptionValueByCodeRptGroupOption('jgbzysxsfs');
      const c = getOptionValueByCodeGlobalOption('nresultcolor');
      if (b === '0' || b === 0) {
        if (!IsEmpty(c)) {
          return { background: c, color: '#fff' };
        }
      }
      if (b === '1' || b === 1) {
        if (!IsEmpty(c)) {
          return { color: c };
        }
      }
    }
    return { color: '#000' };
  }
  /**阴性【结果】 */
  if (row && row.resultFlag && !IsEmpty(row.resultFlag) && row.resultFlag === 'N' && column && column.field === 'testResult') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    if (a === '1' || a === 1) {
      const c = getOptionValueByCodeGlobalOption('nresultcolor');
      if (!IsEmpty(c)) {
        return { background: c, color: '#fff' };
      }
    }
    return { color: '#000' };
  }

  /**危急值 颜色 */
  if (row && !IsEmpty(row.isAlarm) && row.isAlarm === 1 && column && column.field === 'itemNo') {
    const a = getOptionValueByCodeGlobalOption('encolorsetting');
    const b = getOptionValueByCodeGlobalOption('isalarmcolor');
    const d = getOptionValueByCodeGlobalOption('wjzyssfxswbjys'); /**危急值颜色显示是否为背景颜色 wjzyssfxswbjys */
    if (a === 1 || a === '1') {
      if (!IsEmpty(b)) {
        if (d && (d === '1' || d === 1)) {
          return { background: b, color: '#fff' };
        } else {
          return { color: b };
        }
      }
    }
  }
}

onMounted(() => {
});

// 父组调用
defineExpose({
  loading
});

// 获取跟踪记录
function getTraceRecList() {
  stepList.length = 0;
  // operationList.length = 0;

  const url = '/lab/mainState/getTraceRecTwoList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { id: selectInfo.id, reqNo: selectInfo.reqNo }
    })
    .then((res: any) => {
      stepList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert('获取流程节点失败', '提示');
    });
}
</script>

<style lang="scss" scoped>
.card {
  .title {
    text-align: center;
    margin: 0 0 15px;
    font-size: 17px;
    font-weight: bold;
    color: var(--el-text-color-primary);
  }
  .text {
    font-size: 15px;
    line-height: 25px;
    color: var(--el-text-color-regular);
    .el-link {
      font-size: 15px;
    }
  }
  .custom-block.tip {
    padding: 8px 16px;
    background-color: rgba(64, 158, 255, 0.1);
    //background-color: rgba(163, 198, 234, 0.26);
    border-radius: 4px;
    border-left: 5px solid var(--el-color-primary);
    //margin: 20px 0;
  }
  .box-time {
    /* 父容器设置宽度, 并超出部分不显示*/
    width: 400px;
    height: 260px;
    display: inline-block;
    overflow: scroll;
  }
  .box {
    /* 父容器设置宽度, 并超出部分不显示*/
    width: 400px;
    height: 500px;
    display: inline-block;
    overflow: scroll;
  }
  .el-descriptions__cell .el-descriptions__label {
    width: 80px;
  }
  .cell-item {
    width: 80px;
  }
  .el-descriptions__content {
    .el-check-tag {
      margin-right: 10px;
      font-size: 16px;
      margin-bottom: 6px;
    }
  }
  .card-header {
    padding-left: 8px;
  }
}
.tableBody {
  height: calc(100% - 40px);
}
.inspeResultsTitle {
  height: 34px;
  line-height: 34px;
}
.tableRight {
  width: 400px;
  height: calc(100% - 40px);
}

.el-card__body {
  padding: unset;
}
.el-card__header {
  padding: unset;
}
</style>
